<template>
	<transition name="add">
		<div class="add-food">
			<div class="header vux-1px-b">
				<div class="iconfont back-icon" @click="handleClose">&#xe624;</div>
				<h3>新增菜品</h3>
			</div>			
			<group label-width="4.5em">
				<x-input title="菜品名" v-model.trim="value1" placeholder="请输入菜品名"></x-input>
				<cell title="菜品分类" @click.native="showType" is-link></cell>
				<x-input title="价格" type="number" v-model.trim="value2" placeholder="请输入价格"></x-input>
				<x-input title="数量" type="number" v-model.trim="value3" placeholder="请输入数量"></x-input>
				<x-switch title="库存无限" v-model="switch1"></x-switch>
			</group>
			<div class="confirm-btn" @click="saves">保存</div>
		</div>
	</transition>
</template>

<script>
	import { GroupTitle, Group, Cell, XInput, Selector, PopupPicker, Datetime, XNumber, ChinaAddressData, XAddress, XTextarea, XSwitch, Popup } from 'vux'
	export default{
		name : 'AddFood',
		data(){
			return{
				value1 : '',
				value2 : '',
				value3 : '',
				switch1: false,
				shows: false,
			}
		},
		methods:{
			handleClose(){
				this.$emit('closeAdd')
			},
			//显示分类
			showType(){
				this.shows = true;
			},
			//保存
			saves(){
				if(this.value1 == ''){
					this.$vux.alert.show({
						title: '提示',
						content: '请输入菜品名'
					})
					return;
				}
				if(this.value2 == ''){
					this.$vux.alert.show({
						title: '提示',
						content: '请输入价格'
					})
					return;
				}
				if(this.value3 == ''){
					this.$vux.alert.show({
						title: '提示',
						content: '请输入数量'
					})
					return;
				}
				let obj = {};
				obj.name = this.value1;
				obj.price = this.value2;
				obj.sum = this.value3;
				obj.stock = this.switch1 === true ? 1 : 0;
				console.log(obj);
			},
		},
		mounted(){
			
		},
		components:{
			Group,
			GroupTitle,
			Cell,
			XInput,
			Selector,
			PopupPicker,
			XAddress,
			Datetime,
			XNumber,
			XTextarea,
			XSwitch,
			Popup
		}
	}
</script>

<style lang="less" scoped>
	.add-enter-active,.add-leave-active{
		transition: transform .16s ease-in;
	}
	.add-enter,.add-leave-to{
		transform: translateX(100%);
	}
	.add-food{
		overflow-y: scroll;
		z-index: 150;
		position: fixed;
		left: 0;
		top: 0;
		right:0;
		bottom:0;
		background: #fff;
		text-align: left;
		.header{
			position: relative;
			height: .92rem;
			line-height: .92rem;
			width: 100%;
			text-align: center;
			.back-icon{
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 .2rem;
			}
		}
		.confirm-btn{
			position: fixed;
			bottom: .2rem;
			left: 50%;
			transform: translateX(-50%);
			width: 80%;
			height: .8rem;
			line-height: .8rem;
			text-align: center;
			font-size: .32rem;
			color: #fff;
			border-radius: .1rem;
			background: #3dc6b6;
		}
		.foot_type_list{
			background: #fff;
			z-index: 999999;
			p{
				height: 1rem;
				line-height: 1rem;
				font-size: .3rem;
				color: #000;
				background: #fff;
			}
		}
	}
</style>